/**
公共样式
 */

.pr{
    position: relative;
}
/** S 背景颜色 **/

.bg-primary {
    background-color: $color-primary;
}

.bg-success {
    background-color: $color-success;
}

.bg-warning {
    background-color: $color-warning;
}


.bg-white {
    background-color: $color-white;
}

.bg-info {
    background-color: $color-info;
}

.bg-origin {
    background-color: #FF9B45;
}
.bg-F5F5F5 {
    background-color: #F5F5F5;
}
.bg-F4F4F4 {
    background-color: #F4F4F4;
}


/** E 背景颜色 **/


/** E 字体颜色 **/


.white {
    color: $color-white;
}

.black {
    color: $color-text-black;
}

.normal {
    color: $color-text-primary;
}
.grey {
    color: $color-grey;
}

.grey-light{
    color: #B1B1B1;
}

.lighter {
    color: $color-text-regular;
}

.muted {
    color: $color-text-secondary;
}

.primary {
    color: $color-primary;
}

.primary-light-3 {
    color: $color-primary-light-3;
}

.success {
    color: $color-success;
}

.warning {
	color: $color-warning;
}

.green {
    color: $color-green;
}

.yellow {
	color: $color-yellow;
}
.red {
	color: $color-red;
}
/** E 字体颜色 **/


/** S Font **/
.xxxl {
	font-size: $font-size-xxxl;
}
.xxl {
	font-size: $font-size-xxl;
}

// XL
.xl {
    font-size: $font-size-xl;
}

// LG
.lg {
    font-size: $font-size-lg;
}

// MD
.md {
    font-size: $font-size-md;
}

// NR
.nr {
    font-size: $font-size-nr;
}

// SM
.sm {
    font-size: $font-size-sm;
}

// XS
.xs {
    font-size: $font-size-xs;
}

// XXS
.xxs {
    font-size: $font-size-xxs;
}

// mini
.mini {
    font-size: $font-size-mini;
}




// 定义字体大小，Example: f-s-[38-60]
@for $i from 38 through 100 {
	@if $i % 2 == 0 {
		.font-size-#{$i} {
			font-size: $i + rpx;
		}
	}
}

// 字体字重 Example: f-w-[100-900]
@for $i from 100 through 900 {
    @if $i % 100==0 {
        .f-w-#{$i} {
            font-weight: $i;
        }
    }
}

// 生成 .top-1 { top:1% } 到 .top-100 { top:100% }
@for $i from 1 through 100 {
    .top-#{$i} {
        top: #{$i * 1%};
    }
}

@for $i from 1 through 100 {
    .m-b-#{$i} {
        margin-bottom: $i + rpx;
    }
}

/** S Font **/

// 定义内外边距，历遍2-200
@for $i from 2 through 200 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 如：m-30
		.m-#{$i} {
			margin: $i + rpx;
		}
		
		// 如：p-30
		.p-#{$i} {
			padding: $i + rpx;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			//结果如： m-l-30
			// 定义外边距
			.m-#{$short}-#{$i} {
				margin-#{$long}: $i + rpx;
			}
			
			// 定义内边距
			//结果如： p-l-30
			.p-#{$short}-#{$i} {
				padding-#{$long}: $i + rpx;
			}
		}
	}
}


/** S 文本行数限制 **/

.line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.line-2 {
    -webkit-line-clamp: 2;
}

.line-3 {
    -webkit-line-clamp: 3;
}

.line-4 {
    -webkit-line-clamp: 4;
}

.line-2,
.line-3,
.line-4 {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}


/** E 文本行数限制 **/


/** S 内容排序方式 **/
.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }
/** E 内容排序方式 **/

.break-all {
    word-break: break-all;
}
/** S Flex-弹性布局 **/

.flex {
    display: flex;
    flex-direction: row;
}

.flex-inline {
    display: inline-flex;
}


.flex-col {
    flex-direction: column;
}

.align-between {
    align-items: space-between;
    justify-content: space-between;
}
.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-1 {
    flex: 1;
}
.flex-none { flex: none; }

.flex-wrap { flex-wrap: wrap; }

.flex-nowrap { flex-wrap: nowrap; }

.col-baseline {	align-items: baseline; }

.col-center { align-items: center; }

.col-top { align-items: flex-start; }

.col-bottom { align-items: flex-end; }

.col-between { align-items: space-between; }

.col-stretch { align-items:stretch; }

.row-center { justify-content: center; }

.row-left { justify-content: flex-start; }

.row-right { justify-content: flex-end; }

.row-between { justify-content: space-between; }

.row-around { justify-content: space-around; }

.row-evenly { justify-content: space-evenly; }


// Example: flex-[0-24]
@for $i from 0 through 24 {
    .flex-#{$i} {
        flex: $i;
    }
}


/** E Flex-弹性布局 **/

// 行内块元素
.inline {
    display: inline-block;
}

// 块元素
.block {
    display: block;
}


.clearfix:after{
	content: ""; 
	display: block; 
	clear: both; 
	visibility: hidden;  
}  

/* 中划线 */
.line-through {
    text-decoration: line-through;
}


//******图标******/
@mixin icon-image($size) {
    min-height: $size;
    min-width: $size;
    height: $size;
    width: $size;
    vertical-align: middle;
}


.icon-xs {
    @include icon-image(20rpx);
}

.icon-sm {
    @include icon-image(28rpx);
}

.icon {
	@include icon-image(32rpx);
}
.icon-md {
	@include icon-image(44rpx);
}
.icon-lg {
    @include icon-image(54rpx);
}

.icon-xl {
    @include icon-image(58rpx);
}

.icon-xxl {
    @include icon-image(64rpx);
}

.mg-center{
    margin: 0 auto;
}

.text-underline {
    text-decoration: underline;
}

// 图片颜色滤镜
.img-filter{
    filter: $img-filter;
}